<template>
  <div class="bigcontainer">
    <div class="dataScreen-content" ref="dataScreenRef">
    <!-- <dv-full-screen-container class="full-screen-container"> -->
      <div class="header">
        <div class="header-left">
          <div class="pl-12 flex items-center">
            <el-image :src="require('../../../assets/images/analysis/logo.png')" fit="contain"></el-image>
            <div class="ml-5">航盛管理分析看板</div>
          </div>
        </div>
        <div class="header-right">
          <div class="user text-gray-400" style="cursor: pointer;" @click="handlerRouter('/info/material')">
            <div class="user-name text-20px">退出看板</div>
          </div>
          <div class="time font-sans font-bold text-36px">{{ currentTime }}</div>
          <div class="text-18px">
            <div>{{ currentWeek }}</div>
            <div>{{ currentDate }}</div>
          </div>

          <!-- <div class="logout" @click="logout">
            <el-image class="elimage" :src="require('../../../assets/images/bigscreen/switch.png')" fit="contain"></el-image>
          </div> -->
          <div style="margin-right: 20px; cursor: pointer;" @click="toggleFullScreen">
            <svg-icon :icon-class="isFullScreen ? 'exit-fullscreen' : 'fullscreen'" style="height: 20px;width: 20px;" />
          </div>
        </div>
      </div>

      <div class="px-30px py-20px">
        <div class="flex mb-20px gap-20px w-full">
          <div class="h-435px flex-shrink-0" style="width: calc(100% / 3);">
            <in-stock-data ref="inStockDataRef"></in-stock-data>
          </div>
          <div class="h-435px" style="width: calc(100% / 3);">
            <in-transit-data ref="inTransitDataRef"></in-transit-data>
          </div>
          <div class="h-435px" style="width: calc(100% / 3);">
            <shipment-data ref="shipmentDataRef"></shipment-data>
          </div>
        </div>
        <div class="flex gap-20px w-full">
          <div class="h-495px flex-shrink-0" style="width: calc(100% / 3);">
            <terminal-data ref="terminalDataRef"></terminal-data>
          </div>
          <div class="h-495px" style="width: calc(100% / 3 * 2);">
            <third-party-data ref="thirdPartyDataRef"></third-party-data>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import 'dayjs/locale/zh-cn';
import InStockData from "./components/InStockData.vue";
import InTransitData from "./components/InTransitData.vue";
import ShipmentData from "./components/ShipmentData.vue";
import TerminalData from "./components/TerminalData.vue";
import ThirdPartyData from "./components/ThirdPartyData.vue";
import { warehouseMaterialDataApi } from '@/api/hs/bigscreen';


export default {
  name: 'analysisDashboard',
  components: {
    InStockData,
    InTransitData,
    ShipmentData,
    TerminalData,
    ThirdPartyData,
  },
  data() {
    return {
      timer: null,
      currentDate: dayjs().format("YYYY-MM-DD"),
      currentTime: dayjs().format("HH:mm:ss"),
      currentWeek: dayjs().locale('zh-cn').format("dddd"),
      isFullScreen: false,
      interval: null,
    }
  },
  async mounted() {
    this.timer = setInterval(() => {
      this.currentTime = dayjs().format("HH:mm:ss")
      this.currentDate = dayjs().format("YYYY-MM-DD")
      this.currentWeek = dayjs().locale('zh-cn').format("dddd")
    }, 1000)

    if (this.$refs.dataScreenRef) {
      this.$refs.dataScreenRef.style.width = `1920px`;
      this.$refs.dataScreenRef.style.height = `1080px`;
      if (window.innerWidth < 1920) {
        // this.$refs.dataScreenRef.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)`;
        this.$refs.dataScreenRef.style.transform = `scale(${this.getScale()})`;
      } else {
        this.$refs.dataScreenRef.style.transform = `scale(1)`;
      }
    }
    window.addEventListener("resize", this.resize);

    this.warehouseMaterialData();
    this.interval = setInterval(() => {
      this.warehouseMaterialData();
    }, 10000)
  },
  methods: {
    warehouseMaterialData() {
      return new Promise((resolve, reject) => {
        warehouseMaterialDataApi().then(res => {
          this.$refs.inStockDataRef.cardList = this.filterInStockData(res.data);
          this.$refs.inTransitDataRef.cardList = this.filterInTransitData(res.data);
          this.$refs.shipmentDataRef.cardList = this.filterShipmentData(res.data);

          resolve(res.data);
        }).catch(err => {
          reject(err);
        });
      });
    },
    filterInStockData(arr) {
      const arr1 = arr.filter(item => item.dataType === 1);
      const result = arr1.map(item => ({
        name: item.warehouseName,
        data: item.warehouseMaterialCountList.map(item => ({
          name: item.warehouseName,
          value: item.count
        }))
      }))
      return result;
    },
    filterInTransitData(arr) {
      const arr2 = arr.filter(item => item.dataType === 2);
      const result = arr2.map(item => ({
        name: item.warehouseName,
        data: item.warehouseMaterialCountList.map(item => ({
          name: item.warehouseName,
          value: item.count
        }))
      }))
      return result;
    },
    filterShipmentData(arr) {
      const arr3 = arr.filter(item => item.dataType === 3);
      const result = arr3.map(item => ({
        name: item.warehouseName,
        data: item.warehouseMaterialCountList.map(item => ({
          name: item.warehouseName,
          value: item.count
        }))
      }))
      return result;
    },
    handlerRouter(path) {
      if (this.isFullScreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      }

      this.$router.push(path);
    },
    logout() {
      this.$router.push('/');
    },
    resize(e) {
      if (this.$refs.dataScreenRef) {
        if (e.currentTarget.innerWidth < 1920) {
          // this.$refs.dataScreenRef.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)`;
          this.$refs.dataScreenRef.style.transform = `scale(${this.getScale()})`;
        } else {
          this.$refs.dataScreenRef.style.transform = `scale(1)`;
        }
      }
    },
    getScale(width = 1920, height = 1080) {
      let ww = window.innerWidth / width;
      // let wh = window.innerHeight / height;
      // return ww < wh ? ww : wh;
      return ww;
    },
    toggleFullScreen() {
      if (!this.isFullScreen) {
        if (document.documentElement.requestFullScreen) {
          document.documentElement.requestFullScreen();
        } else if (document.documentElement.webkitRequestFullScreen) {
          document.documentElement.webkitRequestFullScreen();
        } else if (document.documentElement.mozRequestFullScreen) {
          document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.msRequestFullScreen) {
          document.documentElement.msRequestFullScreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      }

      this.isFullScreen = !this.isFullScreen;
    },
    clearDataInterval() {
      if (this.interval) {
        clearInterval(this.interval);
        this.interval = null;
      }
    },
  },
  destroyed() {
    this.clearDataInterval();
    clearInterval(this.timer);
    this.timer = null;
    window.removeEventListener("resize", this.resize);
  }
}
</script>

<style lang="scss" scoped>
.bigcontainer {
  width: 100%;
  height: 100%;
  background: #F4F4F4;
  color: #fff;
}
.dataScreen-content {
    position: fixed;
    // top: 50%;
    // left: 50%;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s;
    // transform: translate(-50%, -50%);
    transform-origin: left top;
}
.full-screen-container {
  background: #000D1E;
  color: #fff;
}
.header {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  height: 100px;
  background: url("../../../assets/images/analysis/title_bg.png") no-repeat top center/cover;
  .header-left {
    font-size: 24px;
    width: 50%;
    color: #FFFFFF;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .header-right {
    font-size: 24px;
    width: 600px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    color: #2386FF;
    .user {
      display: flex;
      align-items: center;
      gap: 10px;
      .user-icon {
        width: 22px;
        height: 207px;
        .elimage {
          width: 100%;
          height: 100%;
        }
      }
    }
    .logout {
      width: 20px;
      height: 20px;
      cursor: pointer;
      .elimage {
        width: 100%;
        height: 100%;
      }
    }
  }
}

:deep(.header-item) {
  color: #72CCD3;
}

</style>
